<template>
  <div v-loading="loading" element-loading-text="加载中">
    <el-form ref="orderForm" :model="orderForm" label-width="120px" :rules="rules" style="width: 550px">
      <el-form-item label="收货人：" prop="customerNickname">
        <el-input v-model="orderForm.customerNickname" placeholder="请输入收货人" class="width-260"></el-input>
      </el-form-item>
      <el-form-item label="手机号：" prop="customerPhone">
        <el-input v-model="orderForm.customerPhone" 
          type="text" 
          placeholder="请输入收货人手机号码"
          maxlength="11"
          oninput="this.value=this.value.replace(/^[0,2,3,4,5,6,7,8,9]*$/gi,'')"
          onkeyup="this.value=this.value.replace(/\D/g,'')"
          class="width-260">
        </el-input>
      </el-form-item>
      <el-form-item label="原地址：">
        <div>{{ orderForm.oldCustomerFullAddress }}</div>
      </el-form-item>
      <el-form-item label="新地址：" prop="customerArea">
        <el-row class="flex">
          <el-select class="mar-r-3" v-model="orderForm.customerProvinceCode" filterable placeholder="请选择省份" clearable @change="changeCity(orderForm.customerProvinceCode)">
            <el-option v-for="item in provinceList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
            </el-option>
          </el-select>
          <el-select class="mar-r-3" v-model="orderForm.customerCityCode" filterable placeholder="请选择城市" clearable @change="changeDistrict(orderForm.customerCityCode)">
            <el-option v-for="item in cityList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
            </el-option>
          </el-select>
          <el-select v-model="orderForm.customerDistrictCode" filterable placeholder="请选择区县" clearable>
            <el-option v-for="item in districtList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
            </el-option>
          </el-select>
        </el-row>
        <div class="mar-t-10">
          <el-input v-model="orderForm.customerAddress" placeholder="请输入详细地址，如道路、门牌号、小区、楼栋、单元等"></el-input>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="doCancel">取消</el-button>
      <el-button type="primary" @click="doSave">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { listProvince, listCity, listDistrict } from '@/api/area/area'
  import { getOrder, updateDelivery } from '@/api/goods/order'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 订单id
      orderId: {
        type: String
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.init()
        }
      }
    },
    data() {
      const validateCustomerArea = (rule, value, callback) => {
        if (!this.orderForm.customerProvinceCode) {
          callback(new Error('请选择省份'))
        }
        if (!this.orderForm.customerCityCode) {
          callback(new Error('请选择城市'))
        }
        if (!this.orderForm.customerDistrictCode) {
          callback(new Error('请选择地区'))
        }
        if (!this.orderForm.customerAddress) {
          callback(new Error('请输入详细地址'))
        }
        callback()
      }
      return {
        // 订单收货信息表单
        orderForm: {
          orderId: '',
          customerNickname: '',
          customerPhone: '',
          oldCustomerFullAddress: '',
          customerProvinceCode: '',
          customerCityCode: '',
          customerDistrictCode: '',
          customerAddress: ''
        },
        // 表单规则
        rules: {
          customerNickname: [
            { required: true, message: '请输入收货人', trigger: 'blur' }
          ],
          customerPhone: [
            { required: true, message: '请输入收货人电话', trigger: 'blur' }
          ],
          customerArea: [
            { required: true, validator: validateCustomerArea, trigger: 'blur' }
          ]
        },
        // 省集合
        provinceList: [],
        // 市集合
        cityList: [],
        // 区集合
        districtList: [],
        // 父页面刷新flag
        refreshFlag: false,
        loading: false
      }
    },
    created() {
      // 获取省列表
      listProvince().then(response => {
        this.provinceList = response.data
      })
      this.init()
    },
    methods: {
      // 初始化
      init() {
        const originData = this.$options.data()
        this.orderForm = originData.orderForm
        this.refreshFlag = originData.refreshFlag
        this.loading = true
        getOrder(this.orderId).then(response => {
          this.loading = false
          if (response.isError) return
          const data = response.data
          this.orderForm.orderId = data.orderId
          this.orderForm.customerNickname = data.customerNickname
          this.orderForm.customerPhone = data.customerPhone
          this.orderForm.oldCustomerFullAddress = data.customerFullAddress
        })
      },
      // 获取地址-市
      changeCity(provinceCode, cityCode, districtCode) {
        this.cityList = []
        this.districtList = []
        this.orderForm.customerCityCode = ''
        this.orderForm.customerDistrictCode = ''
        if (provinceCode) {
          listCity(provinceCode).then(response => {
            this.cityList = response.data
          })
          this.orderForm.customerCityCode = cityCode
          this.changeDistrict(cityCode, districtCode)
        }
      },
      // 获取地址-区
      changeDistrict(cityCode, districtCode) {
        this.districtList = []
        this.orderForm.customerDistrictCode = ''
        if (cityCode) {
          listDistrict(cityCode).then(response => {
            this.districtList = response.data
          })
          this.orderForm.customerDistrictCode = districtCode
        }
      },
      // 取消事件
      doCancel() {
        this.$emit('callback', this.refreshFlag)
      },
      // 保存事件
      doSave() {
        this.$refs['orderForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            updateDelivery(this.orderForm).then(response => {
              this.loading = false
              if (response.isError) return
              this.$message({ type: 'success', message: '更新收货信息成功' })
              this.refreshFlag = true
              this.$emit('callback', this.refreshFlag)
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>

</style>